<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./todo/index.css">
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <div class="todo-container">
        <div class="todo-wrap">
            <div class="todo-header">
                <input type="text" @keydown.enter.prevent="addList" placeholder="请输入你的任务名称，按回车键确认"/>
            </div>
            <ul class="todo-main" v-for="item in todoList" :key="item.id">
                <li @mouseenter.prevent="isShow($event,true)" @mouseleave.prevent="isShow($event,false)">
                    <label>
                        <input type="checkbox" @change="isFinished($event,item.id)" :checked="item.isChecked"/>
                        <span>{{item.content}}</span>
                    </label>
                    <button  class="btn btn-danger" @click="deleteList(item.id)" style="display:none">删除</button>
                </li>
            </ul>
            <div class="todo-footer">
                <label>
                    <input type="checkbox" @change="allFinished" :checked="finished === total && total !== 0"/>
                </label>
                <span>
          <span>已完成{{finished}}</span> / 全部{{total}}
        </span>
                <button @click="allDelete" class="btn btn-danger">清除已完成任务</button>
            </div>
        </div>
    </div>
</div>
<script src="todo.js"></script>
</body>
</html>